<template>
        <Layout class="layout" class-prefix="labels">
            <div class="top">
                <Type @update:value="onUpdateType" />
                <Tags :editting="editting" :data-source="dataSource" @delTag="delCurrentTag" />
            </div>
            <div class="editPad">
                <button :class="{selected:editting}" @click="toggleEditTag">{{editbtnMsg}}</button>
                <button :disabled="dialogShow || editting" :class="{selected:dialogShow}" @click="addTag">添加标签</button>
            </div>
            <NewTagDialog @confirm="confirmNewTag" :defaultInfo.sync="defaultInfo" :indexNow.sync="indexNow" v-show="dialogShow" @update:value="updateIsShow" class="newtag-dialog"/>
        </Layout>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'vue-property-decorator';
    import Type from "@/components/Labels/Type.vue";
    import Tags from "@/components/Labels/Tags.vue";
    import NewTagDialog from "@/components/Labels/NewTagDialog.vue";
    import { API_GetTagOptions, API_AddTag, API_DeleteTag } from "@/api/money"
    

    @Component({components:{Tags,Type,NewTagDialog}})
    export default class Labels extends Vue {
        dataSource =[] as TagItem[];
        defaultInfo:TagItem = { desc: '', iconstr: '',type: 1 };
        indexNow = -1;
        dialogShow = false;
        editting = false;
        currentType = 1;
        editbtnMsg = '编辑标签';

        get currentTagList(){
            return this.$store.state.currentTagList;
        }

        created(){
            this.getTagOptions();
        }

        // 获取标签
        getTagOptions() {
            API_GetTagOptions({ type: this.currentType }).then(res => {
                if(res.data.code === 0) {
                    this.dataSource = res.data.result;
                }
            })
        }

        // 0.每次重新点开新建标签的模态框 都需要重新初始化
        addTag(){
            this.dialogShow = true;
            this.indexNow = -1;
            this.defaultInfo = { desc: '', iconstr: '',type: 1 };
        }
        
        // 1. 修改转入转出类型
        onUpdateType(value:string){
            this.currentType = value;
            this.getTagOptions();
        }

        // 2.标签页面进入编辑状态和退出编辑状态
        toggleEditTag(){
            this.editting = !this.editting;
            if (this.editting === true) {
                this.editbtnMsg = '退出编辑';
            }else {
                this.editbtnMsg = '编辑标签';
            }
        }

        // 3.模态框点击确定，新建标签
        confirmNewTag(value:TagItem){
            API_AddTag(value).then(res => {
                if(res.data.code === 0) {
                    this.$toast.success('添加成功');
                    this.getTagOptions();
                }
            })
        }

        // 4. 删除指定序号的ID
        delCurrentTag(tagId: number){
            API_DeleteTag({ kind_id: tagId }).then(res => {
                if(res.data.code === 0) {
                    this.$toast.success('删除成功');
                    this.getTagOptions();
                }
            })
        }

        updateIsShow(value:boolean){
            this.dialogShow = value;
        }
    }
</script>

<style lang="scss">
    .labels-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }
</style>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";
    .layout {
        .editPad {
            display: flex;
            justify-content: center;
            button {
                font-size: 16px;
                color:$color-bgc;
                padding:13px 24px;
                margin:20px 10px;
                border:none;
                border-radius: 10px;
                background-color: $color-highlight;
                &.selected {
                    background-color: #CCCCCC;
                }
            }
        }
        .newtag-dialog {
            position: absolute;
            width: 280px;
            top:110px;
            left:calc(50% - 140px);
            text-align: center;
        }
    }

</style>